<!DOCTYPE HTML>
<html>
<head>
	<title>Rainforest Template</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/m-x.js"></script>
	<script type="text/javascript" src="js/panorama.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript" src="jqtouch/jquery.
1.3.2.min.js" type="application/x-javascript"
charset="utf-8"></script>

<script type="text/javascript" src="jqtouch/jqtouch.min.js"
type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" src="js/bird.js"></script>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>

<body>
<header>
</header>
<section>
</section>	
	
	<div id="dimgOuter" class="imageDivOuter" name="dimgOuter">
	<div id="dimg" class="imageDiv" name="dimg">
		<TABLE border=0 cellPadding=0 cellSpacing=0>
		<!-- THE 360 DEGREE IMAGE BELOW (DO NOT FORCE SIZE) -->
		<!-- be sure to change src in BOTH  images -->
		  <TR>
			<TD><img id="ione" name="ione" src="images/PIV.jpg" border="0" /></TD>
			 
			<TD><img id="itwo" name="itwo" src="images/PIV.jpg" border="0" /></TD> 	
				<div id="character">
		<img id="bird1" src="images/birdRight.gif" />
		<img id="bird2" src="images/birdLeft.gif" class="hideMe"/>
		</div><!--/character-->
	
		 
			</TR>
		</TABLE>
	</div><!--/dimg-->
	
	<!--UGH to do: get rid of tables!-->
	
	</div><!--/dimgouter-->

	
	<div id='nowloading' class='nowLoading'><!--loading msg-->
		<p>Loading...</p>         
	</div><!--/nowloading-->
	

	<div id='PlaceHolderDiv' class='placeHolder'></div><!--/placeholder that images go in-->

	<div id="treasure">
		<h3>You Collected a Treasure!</h3>
		
		<div class="asset">[video/images/audio goes here]</div>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien magna, iaculis eu ullamcorper et, semper nec massa. Sed sit amet metus vitae enim dictum lobortis eu tempus velit. Maecenas lobortis placerat orci ut auctor. Nam non diam libero, eget vulputate lorem.</p>
		
	</div><!--/treasure-->

	<ul id="coordinates"> <!--devicemotion write coordinates-->
		<li>acceleration x: <span id="accelerationX">device does not detect</span></li> 
		<li>acceleration y: <span id="accelerationY">device does not detect</span></li> 
		<li>acceleration z: <span id="accelerationZ">device does not detect</span></li> 
		<li>rotation alpha: <span id="rotationAlpha">device does not detect</span></li> 
		<li>rotation beta: <span id="rotationBeta">device does not detect</span></li> 
		<li>rotation gamma: <span id="rotationGamma">device does not detect</span></li> 
	</ul><!--/coordinates-->
	

<footer>
</footer>
</body>

</html>